<template>
  <div>
    <h1>Animation</h1>
    <div class="test1">
      <button @click="show = !show">Toggle</button>
      <Transition>
        <p v-if="show">hello world</p>
      </Transition>
    </div>

    <ul class="test2">
      <button @click="addItem">再任意位置添加一项</button>
      <button @click="relistItem">再任意位置删除一项</button>
      <TransitionGroup name="list">
        <li v-for="item in list" :key="item">{{ item }}</li>
      </TransitionGroup>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'

const show = ref<boolean>(false)

const list = reactive<number[]>([1, 2, 3, 4, 5, 6])
let count = list.length

const addItem = () => {
  const randomNum = Math.floor(Math.random() * list.length)
  list.splice(randomNum, 0, ++count)
}

const relistItem = () => {
  const randomNum = Math.floor(Math.random() * list.length)
  list.splice(randomNum, 1)
}
</script>

<style scoped lang="scss">
.test1 {
  width: 200px;
  height: 100%;
  padding: 20px 0 20px 20px;
  background-color: yellow;
}
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}
.test2 {
  width: 400px;
  height: 100%;
  padding: 20px 0 20px 20px;
  background-color: bisque;
}
.list-move,
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}
.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

.list-leave-active {
  position: absolute;
}
</style>
